<template>
    <div class="categories">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="javascript:;">商品管理</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 添加分类 -->
        <el-button type="success" plain  @click='addcategories'>添加分类</el-button>
        <!-- 自定义组件 -->
        <tree-grid :treeStructure="true" :columns="columns" :data-source="dataSource" @deleteCate="deleteCategory" @editCate="editCategory">
        </tree-grid>
        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 添加分类 -->
        <el-dialog title="添加商品分类" :visible.sync="dialogFormVisible">
            <el-form :model="addform" label-width='100px'>
                <el-form-item label="分类名称">
                    <el-input v-model="addform.cat_name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级名称">
                    <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" :props='cascaderProps'>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addcategoriesSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { categoriesList, addcategories } from '@/api/index.js'
// 引入自定义组件
import TreeGrid from '@/components/TreeGrid/TreeGrid.vue'
export default {
  data () {
    return {
      pagesize: 10,
      dataSource: [],
      columns: [
        {
          text: '分类名称',
          dataIndex: 'cat_name',
          width: ''
        },
        {
          text: '是否有效',
          dataIndex: 'cat_deleted',
          width: ''
        },
        {
          text: '排序',
          dataIndex: 'cat_level',
          width: ''
        }
      ],
      currentPage: 1,
      total: 0,
      options: [],
      selectedOptions: [],
      dialogFormVisible: false,
      addform: {
        cat_name: '',
        cat_pid: '',
        cat_level: ''
      },
      cascaderProps: {
        label: 'cat_name',
        children: 'children',
        value: 'cat_id'
      }
    }
  },
  methods: {
    // 实现添加分类功能
    addcategoriesSubmit () {
      addcategories().then(res => {
        if (this.selectedOptions.length === 0) {
          this.addform.cat_pid = 0
          this.addform.cat_level = 0
        } else if (this.selectedOptions.length === 1) {
          this.addform.cat_pid = this.selectedOptions[0]
          this.addform.cat_level = 1
        } else if (this.selectedOptions.length === 2) {
          this.addform.cat_pid = this.selectedOptions[1]
          this.addform.cat_level = 2
        }
        addcategories(this.addform).then(res => {
          console.log(res)
          if (res.meta.status === 201) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
          } else {
            this.$message({
              type: 'error',
              message: res.meta.msg
            })
          }
          this.init()
          this.dialogFormVisible = false
        })
      })
    },
    // 添加分类按钮，显示对话框
    addcategories () {
      this.dialogFormVisible = true
      categoriesList({ type: 2 }).then(res => {
        this.options = res.data
      })
    },
    //   当级联选择发生变化的时候触发
    handleChange (value) {

    },
    deleteCategory (cid) {
      console.log(cid)
    },
    editCategory (cid) {
      console.log(cid)
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.init()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.init()
    },
    init () {
      categoriesList({
        type: 3,
        currentPage: this.currentPage,
        pagesize: this.pagesize
      }).then(res => {
        console.log(res)
        if (res.meta.status === 200) {
          this.dataSource = res.data
        }
      })
    }
  },
  // 通过components属性可以来注入你想使用的组件
  components: {
    'tree-grid': TreeGrid
  },
  mounted () {
    categoriesList({ type: 3 }).then(res => {
      console.log(res)
      this.dataSource = res.data
      this.total = res.data.length
    })
  }
}
</script>

<style lang="scss" scoped >
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
